<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件上传demo</title>
    <!-- <script src="statics/layui/layui.js"></script> -->
    <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <script src="https://www.layuicdn.com/layui-v2.5.6/layui.js" charset="utf-8"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>高级应用：多文件上传列表</legend>
</fieldset>

<form class="layui-form" id="userForm" action="/FileUploadAndDown_war_exploded/Upload" enctype="multipart/form-data" method="post">

    <!--用户名-->
    <div class="layui-form-item">
        <label class="layui-form-label" style="margin-left: -18px; font-size: 16px;">上传人：</label>
        <div class="layui-input-block">
            <input type="text" name="username" required  lay-verify="required" placeholder="请输入用户名"  autocomplete="off"  class="layui-input">
        </div>

    </div>
    <!--选择文件-->
    <div class="layui-upload">
        <div class="layui-upload-list">
            <table class="layui-table">
                <thead>
                <tr><th>文件名</th>
                    <th>大小</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr></thead>
                <tbody id="demoList"></tbody>
            </table>
        </div>
        <button type="button" class="layui-btn layui-btn-normal" id="testList" >选择多文件</button>
<!--        <button type="button" class="layui-btn" id="testListAction">开始上传</button>-->
    </div>
    <div class="layui-form-item">
        <div class="layui-input-inline" style="width:300px; margin-top: -38px; margin-left: 150px;">
            <button class="layui-btn" lay-submit="" lay-filter="tijiao">立即提交</button>
        </div>
    </div>

</form>
<script>
    layui.use(['upload','form','jquery','layer'], function(){
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var upload = layui.upload;
        //多文件列表示例
        var demoListView = $('#demoList')
            ,uploadListIns = upload.render({
            elem: '#testList'
            ,accept: 'file'
            ,multiple: true,
             //url:'Upload',
            auto: false
            ,bindAction: '#testListAction'
            ,choose: function(obj){
                var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                //读取本地文件
                obj.preview(function(index, file, result){
                    var tr = $(['<tr id="upload-'+ index +'">'
                        ,'<td>'+ file.name +'</td>'
                        ,'<td>'+ (file.size/1024).toFixed(1) +'kb</td>'
                        ,'<td>等待上传</td>'
                        ,'<td>'
                        ,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
                        ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
                        ,'</td>'
                        ,'</tr>'].join(''));

                    //删除
                    tr.find('.demo-delete').on('click', function(){
                        delete files[index]; //删除对应的文件
                        tr.remove();
                        uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                    });

                    demoListView.append(tr);
                });
            }

        });
         //监听表单的提交事件
        //根据lay-filter="login"中的login监听到提交，选择post提交到控制器
        // form.on("submit(tijiao)",function (data) {
        //     $.post("Upload",data.field,function(result){
        //         console.log(result);
        //         console.log(data.field.username);
        //         var name = data.field.username;
        //     },"json");
        //     //禁止页面跳转
        //     return false;
        // })


    });
</script>


</body>
</html>